<template>
  <view class='bulletinBoard-list-item' @click='goToDetails(bulletin.id)'>
    <!-- 内容  -->
    <view class="bulletinBoard-content">
      {{ bulletin.title }}
    </view>
    <!-- 发布时间 -->
    <view class="bulletinBoard-releaseTime">
      {{ getDate }}
    </view>
  </view>
</template>

<script>
export default {
  name: "bulletinBoard-list-item",
  props: {
    bulletin: {
      type: Object,
      required: true
    },
  },
  data () {
    return {
      date: ''
    };
  },
  methods: {
    // 带id 跳转到 详情页面
    goToDetails (id) {
      uni.navigateTo({
        url: `/subpackage/bulletinBoard-details/bulletinBoard-details?id=` + id
      })
    },

  },
  computed: {
    getDate () {
      const time = this.bulletin?.time.split('T')
      return time[0] + " " + time[1]
    }
  }
}
</script>

<style lang="scss" scoped>
.bulletinBoard-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 1px gray dashed;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
  height: 100rpx;

  .bulletinBoard-content {
    font-size: 32rpx;
    color: #40799f;
    //18rpx=9px =0.5em 
    height: 80rpx;
    line-height: 80rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 发布时间
  .bulletinBoard-releaseTime {
    flex: 1;
    align-self: flex-end;
    font-size: 24rpx;
    color: gray;

  }
}
</style>